Prettify les données JSON dans l'entrée textarea

La coloration syntaxique est difficile, mais regardez ce violon pour une jolie impression d'un objet json entré dans une zone de texte. Notez que le JSON doit être valide pour que cela fonctionne. (Utilisez la console de développement pour détecter les erreurs.) Vérifiez jsLint pour json valide.
Le HTML:
 
 Pretty Print 
Les js:
function prettyPrint () {
var ugly = document.getElementById ('myTextArea'). value;
var obj = JSON.parse (moche);
var pretty = JSON.stringify (obj, indéfini, 4);
document.getElementById ('myTextArea'). value = pretty;
}
Essayez d'abord une entrée simple comme: {"a": "hello", "b": 123}
Une jolie impression simple de JSON peut être effectuée assez facilement. Essayez ce code js: (jsFiddle ici)
// objet js arbitraire:
var myJsObj = {a: 'foo', 'b': 'bar', c: [false, 2, null, 'null']};
// en utilisant JSON.stringify jolie capacité d'impression:
var str = JSON.stringify (myJsObj, non défini, 4);
// affiche un joli objet imprimé dans la zone de texte:
document.getElementById ('myTextArea'). innerHTML = str;
Pour ce HTML:
 
Et consultez la documentation JSON.stringify.
|
Pour l'étape d'analyse, vous allez simplement vouloir JSON.parse le contenu de la zone de texte et gérer toutes les erreurs d'une mauvaise entrée.
Pour la partie mise en forme de votre question, utilisez JSON.stringify (blob, undefined, 2). Alternativement, si vous avez besoin de couleurs, voici un simple composant de format / couleur JSON écrit en React:
const HighlightedJSON = ({json}: Object) => {
const mis en surbrillanceJSON = jsonObj =>
Object.keys (jsonObj) .map (clé => {
valeur const = jsonObj [clé];
laissez valueType = typeof value;
const isSimpleValue =
["string", "number", "boolean"]. includes (valueType) || !valeur;
if (isSimpleValue && valueType === "objet") {
valueType = "null";
}
revenir (

 {key}: 
{isSimpleValue? (
 {`$ {value}`} 
): (
mis en surbrillanceJSON (valeur)
)}

);
});
return 
 {highlightJSON (json)} 
;
};
Voyez-le fonctionner dans ce CodePen:
https://codepen.io/benshope/pen/BxVpjo
J'espère que ça t'as aidé!
|
Si vous êtes un fan de jquery, vous pouvez également utiliser ce petit plugin que j'ai écrit:
// Le plugin
$ .fn.json_beautify = fonction () {
var obj = JSON.parse (this.val ());
var pretty = JSON.stringify (obj, undefined, 4);
this.val (joli);
};
// Ensuite, utilisez-le comme ceci sur n'importe quelle zone de texte
$ ('# myTextArea'). json_beautify ();

 {"name": "John", "age": 30} 
|
Réponse tardive mais moderne, utilisez le paramètre d'intention secrète.
Je vais généralement pour:
JSON.stringify (myData, null, 4);
Voici la définition du code, elle l'explique bien.
stringify (valeur: any, remplacement ?: (this: any, key: string, value: any) => any, space ?: string | number): string;
/ **
* Convertit une valeur JavaScript en une chaîne JSON (JavaScript Object Notation).
* @param value Une valeur JavaScript, généralement un objet ou un tableau, à convertir.
* @param replacer Un tableau de chaînes et de nombres qui agit comme une liste approuvée pour sélectionner les propriétés d'objet qui seront stringifiées.
* @param space Ajoute des caractères d'indentation, d'espace blanc et de saut de ligne au texte JSON de la valeur de retour pour le rendre plus facile à lire.
* /
|
Je ne pense pas que cela puisse être fait avec des zones de texte régulières. Ce que vous pouvez faire (et comment la plupart des éditeurs de code en ligne le font) est de créer une zone de texte transparente qui se superpose au-dessus d'un div contenant le code stylisé. L'utilisateur pourra toujours taper et interagir avec l'entrée (et il déclenche les événements de formulaire associés), et vous pouvez afficher la coloration syntaxique dans le div que l'utilisateur verra visuellement
(voir Textarea qui peut faire la coloration syntaxique à la volée?)
Maintenant, en ce qui concerne le formatage JSON, j'ajouterais des événements personnalisés à la zone de texte afin que lorsqu'un utilisateur tape ou colle quelque chose, l'exécute via un prettifier Javascript JSON (voir Comment puis-je imprimer JSON en utilisant JavaScript?), Puis re-peupler le div et textarea en conséquence
|
Voici une fonction récursive pour renvoyer un objet s'il a été stringifié plusieurs fois:
const jsonPrettify = (json) => {
if (typeof json === 'objet' && json! == null) {
const pretty = JSON.stringify (json, non défini, 4);
revenir jolie;
}
essayez {
const obj = JSON.parse (json);
return jsonPrettify (obj);
} catch (e) {
return json;
}
};
|
Ta Réponse
StackExchange.ifUsing ("éditeur", fonction () {
StackExchange.using ("externalEditor", function () {
StackExchange.using ("extraits", function () {
StackExchange.snippets.init ();
});
});
}, "extraits de code");
StackExchange.ready (fonction () {
var channelOptions = {
tags: "" .split (""),
id: "1"
};
initTagRenderer ("". split (""), "" .split (""), channelOptions);
StackExchange.using ("externalEditor", function () {
// Doit lancer l'éditeur après les extraits, si les extraits sont activés
if (StackExchange.settings.snippets.snippetsEnabled){
StackExchange.using ("extraits", function () {
createEditor ();
});
}
autre {
createEditor ();
}
});
function createEditor () {
StackExchange.prepareEditor ({
useStacksEditor: faux,
heartbeatType: 'réponse',
autoActivateHeartbeat: faux,
convertImagesToLinks: vrai,
noModals: vrai,
showLowRepImageUploadWarning: vrai,
reputationToPostImages: 10,
bindNavPrevention: vrai,
suffixe: "",
imageUploader: {
brandingHtml: "Powered by \ u003ca href = \" https: //imgur.com/ \ "\ u003e \ u003csvg class = \" svg-icon \ "width = \" 50 \ "height = \" 18 \ "viewBox = \ "0 0 50 18 \" fill = \ "none \" xmlns = \ "http: //www.w3.org/2000/svg \" \ u003e \ u003cpath d = \ "M46.1709 9.17788C46.1709 8.26454 46.2665 7.94324 47.1084 7.58816C47.4091 7.46349 47.7169 7.36433 48.0099 7.26993C48.9099 6.97997 49.672 6.73443 49.672 5.93063C49.672 5.22043 48.9832 4.61182 48.1414 4.61182C47.4335 4.61182 46.72556.9762.6943 4.61182C47.4335 4.61182 46.72554.91628 46.094 4.68.4335 4.61182 46.72554.91628 46.094.49.48.4335 4.61182 46.72554.91628 46.094.49.48.4335 4.61182 46.7256 4.9762.698 43.1481 6.59048V11.9512C43.1481 13.2535 43.6264 13.8962 44.6595 13.8962C45.6924 13.8962 46.1709 13.2535 46.1709 11.9512V9.17788Z \ "/ \ u003e \ u003cpath d = \" M32.492 10.1419C32.492 12.6954.0 34184.01448.0 14.6954.0 34184.0 14.6954 10.1419C32.492 12.6954 10.1419C32.492 12.6954.0 41,5985 12,6954 41,5985 10,1419V6,59049C41,5985 5,28821 41,1394 4,66232 40,1061 4,66232C39,0732 4,66232 38,5948 5,28821 38,5948 6,59049V9,60062C38,5948 10,8521 38,2696 11,5455 37,0451 11,4455,5C35,820 521 35.4954 9.60062V6.59049C35.4954 5.28821 35.0173 4.66232 34.0034 4.66232C32.9703 4.66232 32.492 5.28821 32.492 6.59049V10.1419Z \ "/ \ u003e \ u003cpath fill-rule = \" evenodd \ "clip-rule = \" evenodd \ "clip-rule = \" evenodd \ "d. = \ "M25.6622 17.6335C27.8049 17.6335 29.3739 16.9402 30.2537 15.6379C30.8468 14.7755 30.9615 13.5579 30.9615 11.9512V6.59049C30.9615 5.28821 30.4833 4.66231 29.4502 4.66231C28.993 15.6379C30.8468 14.7755 30.9615 13.5579 30.9615 11.9512V6.59049C30.9615 5.28821 30.4833 4.66231 29.4502 4.66231C28.993.509 4.66231 29.4502 4.66231C28.993.505 4.66231 29.4502 4.66231C28.993.505 4.66231 29.4502 4.66231C28.993.505 4.66231 29.4502 4.66231C28.993.505 4.66231 29.4502 4.66231C28.993.505 4.66231 29.4502 4.66231C28.993.505 4.66231 29.4502 4.66231C28.99350 .1369 4.56087 21.0134 6.57349 21.0134 9.27932C21.0134 11.9852 23.003 13.913 25.3754 13.913C26.5612 13.913 27.4607 13.4902 28.1109 12.6616C28.1109 12.7229 28.1161 12.7799 28.121 12.8341.832C 12.7799 28.121 12.8341.830C 12.7799 28.121 12.8341.830C 28.1161 12.7799 28.121 12.8341.830C 12.1161 12.7799 28.121 12.8341.830C 12.1161 12.7799 28.121 12.8341.8304.1256.28.1256 12.7799 28.121 12.8341.285 12.8341.285 12.7799 28.121 25.121 15.2321 24.1352 14.9821 23.5661 14.7787C23.176 14.6393 22.8472 14.5218 22.5437 14.5218C21.7977 14.5218 21.2429 15.0123 21.2429 15.6887C21.2429 16.7375 22.9072 17.6393 22.8472 14.5218 22.5437 14.5218C21.7977 14.5218 21.2429 15.0123 21.2429 15.6887C21.2429 16.7375 22.9072 17.6335 25.6622 17.6335 7.0247 7.02417.6335 25.6622 17.6335 7,0177,0247,0249,2179,2177,024 27.2119 7.09766 28.0918 7.94324 28.0918 9.27932C28.0918 10.6321 27.2311 11.5116 26.1024 11.5116C24.9737 11.5116 24.1317 10.6491 24.1317 9.27932Z \ "/ \ u003e \ u003cpath d = \" M16.802965 11.95128.28.80 19.8079 13.2535 19.8079 11.9512V8.12928C19.8079 5.82936 18.4879 4.62866 16.4027 4.62866C15.1594 4.62866 14.279 4.98375 13.3609 5.88013C12.653 5.05154 11.6581 4.62866 10.3573 4.62866C9.34336 4.62866 8.578062 4.62866C9.34336 4.62866 8.578062 4.62866C9.34336 4.62866 8.578062 4.62866C9.34336 4.62866 8.578062 4.62866C9.34336 4.62866 8.578062 5,8204 5998 5.00066 5.28821 5.00066 6.59049V11.9512C5.00066 13.2535 5.47873 13.8962 6.51203 13.8962C7.54479 13.8962 8.0232 13.2535 8.0232 11.9512V8.90741C8.0232 7.58817 8.44431 6.91179 9.53458 6.91179C10.51093 13.8962C7.54479 13.8962 8.0232 13.2535 8.0232 11.9512V8.90741C8.0232 7.58817 8.44431 6.91179 9.53458 6.91179C10.51093 6.91179 9.53458 6.91179C10.51093 6.91179 9.53458 6.91179C10.51093 6.91179.94.45.8 6.91179C10.51093 6.91179 9.53458 6.91179C10.51093 6.91179.94.458 6.91179C10.51093 6.91179 9.53458 6.91179C10.51093 6.91179.959.89.93 8.91179.851093 13.8119.89359 13.8117.89 C13.4375 13.8962 13.9157 13.2535 13.9157 11.9512V8.90741C13.9157 7.58817 14.3365 6.91179 15.4269 6.91179C16.4027 6.91179 16.8045 7.58817 16.8045 8.94108V11.9512Z \ "/ \ u003e \ u003cpath d = \ "M3.31675 6,59049C3.31675 5,28821 2,83866 4,66232 1,82471 4,66232C0,791758 4,66232 0,313354 5,28821 0,313354 6,59049V11,9512C0,313354 13,2535 0,791758 13,8962 1,82471 13,8962C2,85798 13,8962 1,82471 13,8962C2,85798 13,891262 3,3165,316,59 u003e \ u003cpath d = \ "M1.87209 0.400291C0.843612 0.400291 0 1.1159 0 1.98861C0 2.87869 0.822846 3.57676 1.87209 3.57676C2.90056 3.57676 3.7234 2.87869 3.7234 1.98861C3.7234 \ 1.1159 2.90056 0.400B de remplissage = 0.400B \ "/ \ u003e \ u003c / svg \ u003e \ u003c / a \ u003e",
contentPolicyHtml: "Contributions des utilisateurs sous licence \ u003ca href = \" https: //stackoverflow.com/help/licensing \ "\ u003ecc by-sa \ u003c / a \ u003e \ u003ca href = \" https://stackoverflow.com / legal / content-policy \ "\ u003e (politique de contenu) \ u003c / a \ u003e",
allowUrls: vrai
},
onDemand: vrai,
discardSelector: ".discard-answer"
, immédiatementShowMarkdownHelp: true, enableTables: true, enableSnippets: true
});
}
});
Merci d'avoir répondu à Stack Overflow!
Veuillez vous assurer de répondre à la question. Fournissez des détails et partagez vos recherches!
Mais évitez…
Demander de l'aide, des éclaircissements ou répondre à d'autres réponses.
Faire des déclarations basées sur des opinions; les sauvegarder avec des références ou une expérience personnelle.
Pour en savoir plus, consultez nos conseils sur la rédaction de bonnes réponses.
Brouillon enregistré
Brouillon rejeté
Inscrivez-vous ou connectez-vous
StackExchange.ready (fonction () {
StackExchange.helpers.onClickDraftSave ('# login-link');
});
Inscrivez-vous avec Google
Inscrivez-vous via Facebook
Inscrivez-vous par e-mail et mot de passe
Soumettre
Publier en tant queclient
Nom
Email
Obligatoire, mais jamais affiché
StackExchange.ready (
fonction () {
StackExchange.openid.initPostLogin ('. New-post-login', 'https% 3a% 2f% 2fstackoverflow.com% 2fquestions% 2f26320525% 2fprettify-json-data-in-textarea-input% 23new-answer', 'question_page' );
}
);
Publier en tant qu'invité
Nom
Email
Obligatoire, mais jamais affiché
Publiez votre réponse
Jeter
En cliquant sur «Publier votre réponse», vous acceptez nos conditions d'utilisation, notre politique de confidentialité et notre politique de cookies
Ce n'est pas la réponse que vous recherchez? Parcourir les autres questions marquées javascript jquery html css json ou posez votre propre question.